<template>
  <div class="goodsInfo" v-if="Object.keys(detailInfo).length !==0">
    <div class="info-desc">
      <div class="start"></div>
      <div class="desc">{{detailInfo.desc}}</div>
      <div class="end"></div>
    </div>
    <div class="info-key">
      {{detailInfo.detailImage[0].key}}
    </div>
    <div class="info-list">
      <img v-for="(item,index) in detailInfo.detailImage[0].list"
           :key="index" :src="item" alt="" @load="imgLoaded">
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailGoodsInfo",
    props:{
      detailInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    methods:{
      imgLoaded(){
        this.$emit('imgIsloaded')
      }
    }
  }
</script>

<style scoped>
  .goodsInfo{
    padding:20px 0;
    border-bottom:5px solid #f2f5f8;
  }
  .info-desc{
    padding:0 15px;
  }
  .info-desc .desc{
    font-size:13px;
    padding:15px 0;
  }
  .info-desc .start,.info-desc .end{
    position:relative;
    height:1px;
    width:90px;
    background-color:#a3a3a5;
  }
  .info-desc .start{
    float:left;
  }
  .info-desc .end{
    float:right;
  }
  .info-desc .start::before,.info-desc .end::after{
    content:'';
    width:5px;
    height:5px;
    position:absolute;
    bottom:0;
    background-color:#333;
  }
  .info-desc .start::before{
    left:0;
  }
  .info-desc .end::after{
    right:0;
  }
  .info-key{
    margin: 10px 0 10px 15px;
    color:#333;
    font-size:13px;
  }
  .info-list img{
    width:100%;
    vertical-align: middle;
  }
</style>
